var vData={
    intervalId:null,
    intervalId2:null,
    testData1:null,
    index1:0,
    testData2:null,
    index2:0,
    testData3:null,
    index3:0,
    intervalId2:null,
    piece_left:null,
    piece_right:null,
    zhufeikong1:{
        title: {
            show:false,
            text: '测试数据',
            // offset:[7,175],
            style:{
                fontSize: 12,
                color: ['3','215','8']
            }
        },
        legend:{
            show:true,
            // bottom:'auto',
            // iconWidth:8,
            // iconHeight:7,
            data:'value',
            // [
            //     {name:'10月',color:'92|155|213'},
            //     {name:'11月',color:'237|126|48'},
            //     {name:'12月',color:'165|165|165'}
            // ],
            textStyle: {
                fontSize:10
            }
        },
        xAxis: {
            name: '',
            data: ['测试数据 10月 11月 12月'],
            axisLine:{show:false},
            axisTick:{show:false},
            axisLabel:{
                show:true,
                style: {
                    fontSize: 15,
                    fill: 'rgba(2, 255, 6, .9)'
                }
            },
            splitLine:{show:false},

        },
        yAxis: {
            name: '',
            data: 'value',
            min:0,
            interval:5,
            axisLine:{show:false},
            axisTick:{show:false},
            axisLabel:{
                show:true,
                style: {
                    fill: 'rgba(5, 137, 17, 1)',
                    fontSize:15
                }
            },
            splitLine:{
                show:true,
                style: {
                    fill: 'rgba(131, 137, 141, .9)',
                    lineWidth: 1.5
                }
            },
        },
        grid:{
            left:'10%',
            right:'15%',
            top:'10%',
            bottom:'10%'
        },
        series: [
            {
                name:"10月",
                data: [6],
                type: 'bar',
                barStyle:{
                    fill: 'rgba(92, 155, 213, 1)'
                }
            },
            {
                name:"11月",
                data: [8],
                type: 'bar',
                barStyle:{
                    fill: 'rgba(237, 126, 48, 1)'
                }
            },
            {
                name:"12月",
                data: [4],
                type: 'bar',
                barStyle:{
                    fill: 'rgba(165, 165, 165, 1)'
                }
            }

        ]
    },
    zhufeikong2:{
        // colors: ['#5B9BD5', '#ED7D31'],
        title: {
            text: '通过率',
            offset:[0,-30],
            style:{
                fontSize: 17,
                fill: 'rgba(0, 255, 0, 1)'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                type: 'pie',
                data: [
                    { name: '', value: 100 },
                    { name: '通过', value: 900},
                ],
                radius: ['40%','60%'],
                insideLabel:{
                    show:true,
                    formatter:(dataItem) => (dataItem.name.indexOf('通过')>-1?dataItem.percent+'%':'') ,
                    style: {
                        fontSize: 17,
                        fill: 'rgba(1, 247, 3, 2)',
                        textAlign: 'left',
                        textBaseline: 'center'
                    }
                },
                outsideLabel:{
                    show:false,
                    formatter:(dataItem) => (dataItem.name.indexOf('通过')>-1?'${name}-{percent}%':'') ,
                    style:{
                        fontSize:12,
                        labelLineBendGap:'40%',
                        labelLineEndLength:5
                    }
                },
                pieStyle:{
                    // fill: ['rgba(92, 155, 213, 1)','rgba(237, 126, 48, 1)']
                }
            }
        ]
    },
    zuodongtong1:{
        xAxis: {
            name: '',
            data: ['测试数据 10月 11月 12月'],
            axisLine:{show:false},
            axisTick:{show:false},
            axisLabel:{
                show:true,
                style: {
                    fontSize: 15,
                    fill: 'rgba(2, 255, 6, .9)'
                }
            },
            splitLine:{show:false},

        },
        yAxis: {
            name: '',
            data: 'value',
            min:0,
            interval:5,
            axisLine:{show:false},
            axisTick:{show:false},
            axisLabel:{
                show:true,
                style: {
                    fill: 'rgba(5, 137, 17, 1)',
                    fontSize:15
                }
            },
            splitLine:{
                show:true,
                style: {
                    fill: 'rgba(131, 137, 141, .9)',
                    lineWidth: 1.5
                }
            },
        },
        grid:{
            left:'10%',
            right:'15%',
            top:'10%',
            bottom:'10%'
        },
        series: [
            {
                name:"10月",
                data: [5],
                type: 'bar',
                barStyle:{
                    fill: 'rgba(92, 155, 213, 1)'
                }
            },
            {
                name:"11月",
                data: [7],
                type: 'bar',
                barStyle:{
                    fill: 'rgba(237, 126, 48, 1)'
                }
            },
            {
                name:"12月",
                data: [3],
                type: 'bar',
                barStyle:{
                    fill: 'rgba(165, 165, 165, 1)'
                }
            }

        ]
    },
    zuodongtong2:{
        data: [
            {
                name: '通过率',
                value: 50
            },
            {
                name: '生产',
                value: 50
            }
        ],
        digitalFlopStyle: {
            fontSize: 12,
            fill: 'rgba(0, 255, 0, 1)'
        },
        activeTimeGap:600000
    },
    yeyafa1:{
        xAxis: {
            name: '',
            data: ['测试数据 10月 11月 12月'],
            axisLine:{show:false},
            axisTick:{show:false},
            axisLabel:{
                show:true,
                style: {
                    fontSize: 15,
                    fill: 'rgba(2, 255, 6, .9)'
                }
            },
            splitLine:{show:false},

        },
        yAxis: {
            name: '',
            data: 'value',
            min:0,
            interval:5,
            axisLine:{show:false},
            axisTick:{show:false},
            axisLabel:{
                show:true,
                style: {
                    fill: 'rgba(5, 137, 17, 1)',
                    fontSize:15
                }
            },
            splitLine:{
                show:true,
                style: {
                    fill: 'rgba(131, 137, 141, .9)',
                    lineWidth: 1.5
                }
            },
        },
        grid:{
            left:'10%',
            right:'15%',
            top:'10%',
            bottom:'10%'
        },
        series: [
            {
                name:"10月",
                data: [2],
                type: 'bar',
                barStyle:{
                    fill: 'rgba(92, 155, 213, 1)'
                }
            },
            {
                name:"11月",
                data: [6],
                type: 'bar',
                barStyle:{
                    fill: 'rgba(237, 126, 48, 1)'
                }
            },
            {
                name:"12月",
                data: [1],
                type: 'bar',
                barStyle:{
                    fill: 'rgba(165, 165, 165, 1)'
                }
            }

        ]
    },
    yeyafa2:{
        data: [
            {
                name: '通过率',
                value: 300
            },
            {
                name: '生产',
                value: 700
            }
        ],
        digitalFlopStyle: {
            fontSize: 12,
            fill: 'rgba(0, 255, 0, 1)'
        },
        activeTimeGap:600000
    },
    piece_1:{
        data: [
        ],
        rowNum:3,
        align:['left','right'],
        oddRowBGC:"",
        evenRowBGC:""
    },
    piece_2:{
        data: [
        ],
        rowNum:3,
        align:['left','right'],
        oddRowBGC:"",
        evenRowBGC:""
    },
    piece_3:{
        data: [
        ],
        rowNum:3,
        align:['left','right'],
        oddRowBGC:"",
        evenRowBGC:""
    }
};

let _this=null;

var app = new Vue({
    el: '#datav',
    data:vData,
    computed:{

    },
    methods:{
        refreshPageData(){
            _this.getStatisticalData();
            _this.getTestData();
            _this.getStationStatus();
            _this.getPieChartData();
        },
        //获取柱形图数据
        getStatisticalData(){
            _this.showStatisticalData(1);
            _this.showStatisticalData(2);
            _this.showStatisticalData(3);
        },
        showStatisticalData(dataId){
            // console.info("showStatisticalData方法开始:"+dataId);
            $.ajax({
                url: '/largeScreen/getStatisticalData/'+dataId,
                data: {stationName: dataId},
                cache: false,
                contentType: false,
                processData: false,
                type: 'GET',
                success: function (result) {
                    if (result.code == web_status.SUCCESS && result.data) {
                        // console.info(dataId + ">>获取柱形图数据:" + JSON.stringify(result.data));

                        //刷新图表
                        let monthData = result.data.monthData;
                        let chartsData = result.data.chartsData;
                        let zhuxingData = {
                            xAxis: {
                                name: '',
                                data: [monthData],
                                axisLine: {show: false},
                                axisTick: {show: false},
                                axisLabel: {
                                    show: true,
                                    style: {
                                        fontSize: 15,
                                        fill: 'rgba(2, 255, 6, .9)'
                                    }
                                },
                                splitLine: {show: false},

                            },
                            yAxis: {
                                name: '',
                                data: 'value',
                                min: 0,
                                minInterval: 5,
                                axisLine: {show: false},
                                axisTick: {show: false},
                                axisLabel: {
                                    show: true,
                                    style: {
                                        fill: 'rgba(5, 137, 17, 1)',
                                        fontSize: 15
                                    }
                                },
                                splitLine: {
                                    show: true,
                                    style: {
                                        fill: 'rgba(131, 137, 141, .9)',
                                        lineWidth: 1.5
                                    }
                                },
                            },
                            grid: {
                                left: '10%',
                                right: '14%',
                                top: '7%',
                                bottom: '25%'
                            },
                            series: [
                                {
                                    name: chartsData[2].name,
                                    data: [chartsData[2].data],
                                    type: 'bar',
                                    barStyle: {
                                        fill: 'rgba(92, 155, 213, 1)'
                                    }
                                },
                                {
                                    name: chartsData[1].name,
                                    data: [chartsData[1].data],
                                    type: 'bar',
                                    barStyle: {
                                        fill: 'rgba(237, 126, 48, 1)'
                                    }
                                },
                                {
                                    name: chartsData[0].name,
                                    data: [chartsData[0].data],
                                    type: 'bar',
                                    barStyle: {
                                        fill: 'rgba(165, 165, 165, 1)'
                                    }
                                }

                            ]
                        }

                        if (dataId == '1') {
                            vData.zhufeikong1 = zhuxingData;
                        } else if (dataId == '2') {

                            vData.zuodongtong1 = zhuxingData;
                        } else if (dataId == '3') {
                            vData.yeyafa1 = zhuxingData;
                        }
                        // console.info(dataId + ">>zhuxingData:" + JSON.stringify(zhuxingData));

                    }
                }
            });
        },
        //获取饼图数据
        getPieChartData(){
            console.info("getPieChartData方法开始:");
            $.ajax({
                url: '/largeScreen/getPieChartData',
                data: {},
                cache: false,
                contentType: false,
                processData: false,
                type: 'GET',
                success: function (result) {
                    if (result.code == web_status.SUCCESS && result.data) {
                        console.info("getPieChartData>>获取饼图数据:" + JSON.stringify(result.data));

                        let zfk = result.data.zfk;
                        if(zfk && 0!=zfk.bt_total) {
                            vData.zhufeikong2 = {
                                radius: '75',
                                activeRadius: '80',
                                data: [
                                    {
                                        name: '通过率',
                                        value: zfk.bt_pass
                                    },
                                    {
                                        name: '生产',
                                        value: zfk.bt_no_pass
                                    }
                                ],
                                digitalFlopStyle: {
                                    fontSize: 14,
                                    fill: 'rgba(0, 255, 0, 1)'
                                },
                                activeTimeGap: activeTimeGap_page
                            };
                            $("#zhufeikong_total").text(zfk.bt_total);
                            $("#time_interval1").text(result.data.time_interval.time);
                        }else{
                            vData.zhufeikong2={};
                        }
                        let zdt = result.data.zdt;
                        if(zdt && 0!=zdt.bt_total){
                            vData.zuodongtong2 = {
                                radius:'75',
                                activeRadius:'80',
                                data: [
                                    {
                                        name: '通过率',
                                        value: zdt.bt_pass
                                    },
                                    {
                                        name: '生产',
                                        value: zdt.bt_no_pass
                                    }
                                ],
                                digitalFlopStyle: {
                                    fontSize: 14,
                                    fill: 'rgba(0, 255, 0, 1)'
                                },
                                activeTimeGap: activeTimeGap_page
                            };
                            $("#zuodongtong_total").text(zdt.bt_total);
                            $("#time_interval2").text(result.data.time_interval.time);
                        }else{
                            vData.zuodongtong2={};
                        }
                        let yyf = result.data.yyf;
                        if(yyf && 0!=yyf.bt_total){
                            vData.yeyafa2 = {
                                radius:'75',
                                activeRadius:'80',
                                data: [
                                    {
                                        name: '通过率',
                                        value: yyf.bt_pass
                                    },
                                    {
                                        name: '生产',
                                        value: yyf.bt_no_pass
                                    }
                                ],
                                digitalFlopStyle: {
                                    fontSize: 14,
                                    fill: 'rgba(0, 255, 0, 1)'
                                },
                                activeTimeGap: activeTimeGap_page
                            };
                            $("#yeyafa_total").text(yyf.bt_total);
                            $("#time_interval3").text(result.data.time_interval.time);
                        }else{
                            vData.yeyafa2={};
                        }
                    }
                }
            });
        },
        //获取测试数据
        getTestData:function (){
            _this.showTestData(1);
            _this.showTestData(2);
            _this.showTestData(3);
        },
        showTestData:function (dataId){
            $.ajax({
                url: '/largeScreen/getTestData/'+dataId,
                data: {stationName: dataId},
                cache: false,
                contentType: false,
                processData: false,
                type: 'GET',
                success: function (result) {
                    if (result.code == web_status.SUCCESS) {
                        // console.info(dataId + ">>获取测试数据:" + JSON.stringify(result.data));
                        let device_pn;
                        let numId;
                        let test_date;
                        let timeId;
                        let deviceNameId,deviceName;

                        let pieceData = {
                            data: [],
                            columnWidth:[vData.piece_left,vData.piece_right],
                            rowNum:5,
                            align: ['left', 'right'],
                            headerBGC:'',   //#00008B
                            oddRowBGC: '',
                            evenRowBGC: '',
                            waitTime:activeTimeGap_page
                        }

                        //js获取当前的时分秒
                        let myDate = new Date();
                        let str = myDate.toTimeString(); //"10:55:24 GMT+0800 (中国标准时间)"
                        let timeStr = str.substring(0,8); //  '10:55:24'
                        if (result.data) {
                            let testData = [];
                            let testItemContent="",testSubItemIsPass="";
                            for (var i = 0; i < result.data.length; i++) {
                                if (i == 0) {
                                    device_pn = result.data[i].devicePn;
                                    test_date = result.data[i].testDate.substring(0, 10);
                                    deviceName= result.data[i].deviceName;
                                }else if(i>4){
                                    break;
                                }
                                testItemContent=result.data[i].testItemContent;
                                if(testItemContent.length>14){
                                    testItemContent=testItemContent.substring(0,14)+"...";
                                }
                                testSubItemIsPass=result.data[i].testSubItemIsPass;
                                if(testSubItemIsPass=='Fail' || testSubItemIsPass=='fail' || testSubItemIsPass=='FAIL'){
                                    testSubItemIsPass="<span style='color: red'>"+testSubItemIsPass+"</span>";
                                }
                                testData = [testItemContent , testSubItemIsPass] ;
                                pieceData.data.push(testData);
                            }

                            if(result.data.length>0){
                                if (dataId == '1') {
                                    vData.piece_1=pieceData;
                                    vData.testData1 = result.data;
                                    vData.index1=0;
                                    numId = "zhufeikong_piece_num";
                                    timeId = "zhufeikong_piece_time"
                                    deviceNameId="zhufeikong_device_name";
                                } else if (dataId == '2') {
                                    vData.piece_2=pieceData;
                                    vData.testData2 = result.data;
                                    vData.index2=0;
                                    numId = "zuodongtong_piece_num";
                                    timeId = "zuodongtong_piece_time"
                                    deviceNameId="zuodongtong_device_name";
                                } else if (dataId == '3') {
                                    vData.piece_3=pieceData;
                                    vData.testData3 = result.data;
                                    vData.index3=0;
                                    numId = "yeyafa_piece_num";
                                    timeId = "yeyafa_piece_time"
                                    deviceNameId="yeyafa_device_name";
                                }
                                console.info(timeStr+":"+dataId + ">测试数据展示>" + JSON.stringify(pieceData));
                            }

                        }
                        if(deviceName){
                            $("#" + deviceNameId).text("测试件名称:"+deviceName);
                        }
                        if(device_pn){
                            $("#" + numId).text("件号:"+device_pn);
                        }
                        if(test_date){
                            $("#" + timeId).text(test_date);
                        }



                    }
                }
            });
        },
        loopTestData:function (){
            // console.info("loopTestData方法开始:");
            let dataInde=[];
            let testData = [];
            // debugger;
            // 764005884 rqntrh3c
            if(vData.testData1 && vData.testData1.length>0) {
                while (dataInde.length < 5) {
                    if (vData.index1 < vData.testData1.length) {
                        dataInde.push(vData.index1);
                        vData.index1++;
                    } else if (vData.index1 == vData.testData1.length) {
                        vData.index1 = 0;
                    }
                }
                let testItemContent = "", testSubItemIsPass = "";
                for (var i = 0; i < dataInde.length; i++) {
                    testItemContent = vData.testData1[dataInde[i]].testItemContent;
                    if (testItemContent.length > 14) {
                        testItemContent = testItemContent.substring(0, 14) + "...";
                    }
                    testSubItemIsPass = vData.testData1[dataInde[i]].testSubItemIsPass;
                    if (testSubItemIsPass == 'Fail' || testSubItemIsPass == 'fail' || testSubItemIsPass == 'FAIL') {
                        testSubItemIsPass = "<span style='color: red'>" + testSubItemIsPass + "</span>";
                    }
                    testData.push([testItemContent, testSubItemIsPass]);
                }
                vData.piece_1 = {
                    data: testData,
                    columnWidth: [vData.piece_left, vData.piece_right],
                    rowNum: 5,
                    align: ['left', 'right'],
                    headerBGC: '',   //#00008B
                    oddRowBGC: '',
                    evenRowBGC: '',
                    waitTime: activeTimeGap_page
                };
                // console.info("loopTestData方法开始:vData.piece_1"+JSON.stringify(vData.piece_1));
            }
            //
            if(vData.testData2 && vData.testData2.length>0) {
                dataInde = [];
                while (dataInde.length < 5) {
                    if (vData.index2 < vData.testData2.length) {
                        dataInde.push(vData.index2);
                        vData.index2++;
                    } else if (vData.index2 == vData.testData2.length) {
                        vData.index2 = 0;
                    }
                }
                testData = [];
                for (var i = 0; i < dataInde.length; i++) {
                    testItemContent = vData.testData2[dataInde[i]].testItemContent;
                    if (testItemContent.length > 14) {
                        testItemContent = testItemContent.substring(0, 14) + "...";
                    }
                    testSubItemIsPass = vData.testData2[dataInde[i]].testSubItemIsPass;
                    if (testSubItemIsPass == 'Fail' || testSubItemIsPass == 'fail' || testSubItemIsPass == 'FAIL') {
                        testSubItemIsPass = "<span style='color: red'>" + testSubItemIsPass + "</span>";
                    }
                    testData.push([testItemContent, testSubItemIsPass]);
                }
                vData.piece_2 = {
                    data: testData,
                    columnWidth: [vData.piece_left, vData.piece_right],
                    rowNum: 5,
                    align: ['left', 'right'],
                    headerBGC: '',   //#00008B
                    oddRowBGC: '',
                    evenRowBGC: '',
                    waitTime: activeTimeGap_page
                };
                // console.info("loopTestData方法开始:vData.piece_2"+JSON.stringify(vData.piece_2));
            }
            //
            if(vData.testData3 && vData.testData3.length>0) {
                dataInde = [];
                while (dataInde.length < 5) {
                    if (vData.index3 < vData.testData3.length) {
                        dataInde.push(vData.index3);
                        vData.index3++;
                    } else if (vData.index3 == vData.testData3.length) {
                        vData.index3 = 0;
                    }
                }
                testData = [];
                for (var i = 0; i < dataInde.length; i++) {
                    testItemContent = vData.testData3[dataInde[i]].testItemContent;
                    if (testItemContent.length > 14) {
                        testItemContent = testItemContent.substring(0, 14) + "...";
                    }
                    testSubItemIsPass = vData.testData3[dataInde[i]].testSubItemIsPass;
                    if (testSubItemIsPass == 'Fail' || testSubItemIsPass == 'fail' || testSubItemIsPass == 'FAIL') {
                        testSubItemIsPass = "<span style='color: red'>" + testSubItemIsPass + "</span>";
                    }
                    testData.push([testItemContent, testSubItemIsPass]);
                }
                vData.piece_3 = {
                    data: testData,
                    columnWidth: [vData.piece_left, vData.piece_right],
                    rowNum: 5,
                    align: ['left', 'right'],
                    headerBGC: '',   //#00008B
                    oddRowBGC: '',
                    evenRowBGC: '',
                    waitTime: activeTimeGap_page
                };
                // console.info("loopTestData方法开始:vData.piece_3"+JSON.stringify(vData.piece_3));
            }


            //js获取当前的时分秒
            let myDate = new Date();
            let str = myDate.toTimeString(); //"10:55:24 GMT+0800 (中国标准时间)"
            let timeStr = str.substring(0,8); //  '10:55:24'
            console.info(timeStr+":定时滚动"+JSON.stringify(dataInde)+
                "，数据1："+JSON.stringify(vData.piece_1)+
                "，数据2："+JSON.stringify(vData.piece_2)+
                "，数据3："+JSON.stringify(vData.piece_3));
        },
        //获取状态信息
        getStationStatus:function (){
            _this.showStationStatus(1);
            _this.showStationStatus(2);
            _this.showStationStatus(3);
        },
        showStationStatus:function (dataId){
            $.ajax({
                url: '/largeScreen/getStationStatus/'+dataId,
                data: {stationName: dataId},
                cache: false,
                contentType: false,
                processData: false,
                type: 'GET',
                success: function (result) {
                    if (result.code == web_status.SUCCESS) {
                        // console.info(dataId + ">>获取状态信息:" + JSON.stringify(result.data));
                        let status="空闲";
                        let statusImg="/img/free.png";
                        if (result.data) {
                            status=result.data.status;
                            statusImg=result.data.statusImg;
                            // console.info(dataId + ">测试台状态数据>" + JSON.stringify(result.data));
                        }
                        $("#status" + dataId).text(status);
                        $("#statusImg" + dataId).attr("src",statusImg);

                    }
                }
            });
        }

    },
    created:function (){
        console.log("intervalTime_page="+intervalTime_page);
        console.log("activeTimeGap_page="+activeTimeGap_page);
        console.log("waitTime_page="+waitTime_page);
    },
    mounted() {
        _this = this;
        let width_0=$("#datav").width();
        _this.piece_left=width_0*0.68*0.33*0.81*0.96;
        _this.piece_right=width_0*0.68*0.33*0.19*0.96;
        // this.piece_1.columnWidth=[this.piece_left,this.piece_right];
        // this.piece_2.columnWidth=[this.piece_left,this.piece_right];
        // this.piece_3.columnWidth=[this.piece_left,this.piece_right];

        _this.refreshPageData();

        //定时器1
        if(this.intervalId == null){
            console.log("intervalId定时器准备启动！");
            this.intervalId = setInterval(() => {
                _this.refreshPageData();
            }, intervalTime_page);
            console.log("intervalId定时器已启动！"+intervalTime_page);
        }

        // 定时器2
        if(this.intervalId2 == null){
            console.log("intervalId2定时器准备启动！");
            this.intervalId2 = setInterval(() => {
                _this.loopTestData();
            }, waitTime_page);
            console.log("intervalId2定时器已启动！"+waitTime_page);
        }


    },
    destroy:function (){
        //销毁定时器
        this.$once('hook:beforeDestroy', () => {
            if(this.intervalId !=null){
                clearInterval(this.intervalId);
                this.intervalId==null;
            }
            if(this.intervalId2 !=null){
                clearInterval(this.intervalId2);
                this.intervalId2==null;
            }

        })
    }
})